<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix header-box">
				<span>文章分类</span>
				<el-button type="primary" size="mini" @click="tianjia">添加分类</el-button>
			</div>
			<!-- 表格区域 -->
			<el-table style="width: 100%;" :data="cateList" border stripe>
				<el-table-column label="序号" type="index" width="50"></el-table-column>
				<el-table-column label="分类名称" prop="cate_name"></el-table-column>
				<el-table-column label="分类别名" prop="cate_alias"></el-table-column>
				<el-table-column label="操作">
					<template v-slot="{ row }">
						<el-button type="primary" size="mini" @click="xiugai(row.id)">修改</el-button>
						<el-button type="danger" size="mini" @click="remove(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 添加分类的对话框 -->
			<el-dialog title="添加文章分类" :visible.sync="addVisible" width="35%" @closed="onAddClosed">
				<!-- 添加的表单 -->
				<el-form :model="addForm" :rules="addRules" ref="addRef" label-width="90px">
					<el-form-item label="分类名称" prop="cate_name">
						<el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input>
					</el-form-item>
					<el-form-item label="分类别名" prop="cate_alias">
						<el-input v-model="addForm.cate_alias" minlength="1" maxlength="15"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="addVisible = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="addCate">添 加</el-button>
				</span>
			</el-dialog>
			<!-- 修改分类的对话框 -->
			<el-dialog title="修改文章分类" :visible.sync="editVisible" width="35%" @closed="onEditClosed">
				<!-- 修改的表单 -->
				<el-form :model="editForm" :rules="addRules" ref="editFormRef" label-width="100px">
					<el-form-item label="分类名称" prop="cate_name">
						<el-input v-model="editForm.cate_name"></el-input>
					</el-form-item>
					<el-form-item label="分类别名" prop="cate_alias">
						<el-input v-model="editForm.cate_alias"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="editCate">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'ArtCate',
		data() {
			return {
				// 存储修改文章分数据对象
				editForm: {
					cate_name: "",
					cate_alias: "",
				},
				// 文章的分类列表
				cateList: [],
				// 控制修改对话框的显示与隐藏
				editVisible: false,
				// 控制添加对话框的显示与隐藏
				addVisible: false,
				// 添加表单的数据对象
				addForm: {
					cate_name: '',
					cate_alias: ''
				},
				// 添加表单的验证规则对象
				addRules: {
					cate_name: [{
							required: true,
							message: '请输入分类名称',
							trigger: 'blur'
						},
						{
							pattern: /^\S{1,10}$/,
							message: '分类名必须是1-10位的非空字符',
							trigger: 'blur'
						}
					],
					cate_alias: [{
							required: true,
							message: '请输入分类别名',
							trigger: 'blur'
						},
						{
							pattern: /^[a-zA-Z0-9]{1,15}$/,
							message: '分类别名必须是1-15位的字母数字',
							trigger: 'blur'
						}
					]
				}
			}
		},
		created() {
			this.initCateList()
		},
		methods: {
			// 点击了删除按钮
			async remove(id) {
				// 不允许删除前两个分类
				if (id === 1 || id === 2) {
					return this.$message.error('管理员不允许删除这个分类！')
				}

				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						// 发起请求删除对应的分类
				  const {
							data: res
						} = await this.$http.delete("/my/cate/del", {
							params: {
								id
							},
						});

						// 判断是否删除成功
						if (res.code !== 0) return this.$message.error("删除分类失败！");
						this.$message.success("删除分类成功！");
						this.initCateList();
					})
					.catch((err) => err);


			},
			// 确定修改
			editCate() {
				// 1. 表单预验证
				this.$refs.editFormRef.validate(async valid => {
					if (!valid) return

					// 2. 发起请求
					const {
						data: res
					} = await this.$http.put('/my/cate/info', this.editForm)
					// 3. 修改失败
					if (res.code !== 0) return this.$message.error('修改分类失败！')
					// 4. 修改成功：提示用户、关闭对话框、刷新列表数据
					this.$message.success('修改分类成功！')
					this.editVisible = false
					this.initCateList()
				})
			},
			onEditClosed() {
				this.$refs.editFormRef.resetFields()
			},
			// 修改
			async xiugai(id) {
				//  获取分类的信息
				const {
					data: res
				} = await this.$http.get('/my/cate/info', {
					params: {
						id
					}
				})
				if (res.code === 0) {
					this.editForm = res.data
					this.editVisible = true
				}
			},
			// 添加
			addCate() {
				// 表单预效验
				this.$refs.addRef.validate(async valid => {
					if (!valid) return
					// 发起请求
					const {
						data: res
					} = await this.$http.post('/my/cate/add', this.addForm)
					if (res.code !== 0) return this.$message.error('添加分类失败！')
					this.$message.success('添加分类成功！')
					// 关闭对话框
					this.addVisible = false
					// 重新请求列表数据
					this.initCateList()
				})
			},
			tianjia() {
				this.addVisible = true
			},
			onAddClosed() {
				this.$refs.addRef.resetFields()
			},
			async initCateList() {
				const {
					data: res
				} = await this.$http.get('/my/cate/list')
				if (res.code === 0) {
					this.cateList = res.data
				}
				console.log(this.cateList);
			}
		}
	}
</script>

<style lang="less" scoped>
	.header-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
